<template>
    <div class="top-form">
        <!-- <el-row> -->
        <div style="float: left;">
            <el-form :inline="true">
                <el-form-item label="交易日">
                    <el-date-picker type="datetime" v-model="formData.date_time" value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="选择日期 时间" style="width: 180px" @change="handleSearch" @focus="handleDateTimeChange"
                        :disabled-date="disabledDate" />
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="formData.type" clearable placeholder="请选择" style="width: 144px">
                        <el-option v-for="item in typeOption" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="时段类型">
                    <el-select v-model="formData.tag_name" multiple collapse-tags clearable placeholder="请选择"
                        style="width: 153px">
                        <el-option v-for="item in periodTypeOption" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>

        <typeData />
        <logo />
        <timeCard />
        <!-- </el-row> -->

    </div>
</template>

<script lang='js' setup>
import { ref, watch, inject } from 'vue';
import typeData from './typeData.vue';
import timeCard from './timeCard.vue';
import logo from './logo.vue';

const emit = defineEmits(['clearTime'])
const props = defineProps(['formData'])
// const formData = inject('searchFormData')
const typeOption = ref([
    {
        value: 1,
        label: '交易单元一'
    },
    {
        value: 2,
        label: '交易单元二'
    },
    {
        value: 3,
        label: '交易单元三'
    },
])
const periodTypeOption = ref([
    {
        value:'峰',
        label: '高峰'
    },
    {
        value: '尖峰',
        label: '尖峰'
    },
    {
        value: '平',
        label: '平段'
    },
    {
        value: '谷',
        label: '低谷'
    },
    {
        value: '深谷',
        label: '深谷'
    },
])

const disabledDate = (time) => {
    return time.getTime() > Date.now()
}
// 关闭定时器
const handleDateTimeChange = () => {
    // if(moment(searchFormData.value.date_time, "YYYY-MM-DD HH:mm:ss")){
        // console.log('关闭定时器');
        emit('clearTime')
    // }

}
</script>

<style scoped lang='less'>
.top-form {
    box-sizing: border-box;
    height: 52px;
    background: #14161A;
    border-radius: 4px 4px 0px 0px;
    font-size: 13px;
    color: #A9AEB8;
    padding: 10px;
    margin-bottom: 4px;
}

/deep/.el-form--inline .el-form-item {
    margin-right: 10px;
}

/deep/.el-input {
    --el-border-width: 1px;
    --el-border-style: solid;
    --el-border-color: #4E5969;
    --el-input-text-color: #F7F8FA;
    --el-input-bg-color: #16191F;
    --el-input-focus-border-color: var(--el-border-color-hover);
}

/deep/.el-select__wrapper {

    background-color: #16191F;
    border-radius: var(--el-border-radius-base);
    box-shadow: 0 0 0 1px #4E5969 inset;

}

/deep/.el-select__placeholder {
    color: #F7F8FA;
}

/deep/.el-form-item__label {
    color: #A9AEB8;
}

/deep/.el-tag {
    --el-border-color: #4E5969;
    --el-input-text-color: #F7F8FA;
    --el-tag-bg-color: var(--el-border-color);
    --el-tag-text-color: var(--el-input-text-color)
}
</style>